React 오류 경계: 견고한 애플리케이션을 위한 우아한 오류 처리 기법

역동적인 웹 개발 세계에서 견고하고 사용자 친화적인 애플리케이션을 만드는 것은 가장 중요합니다. 사용자 인터페이스 구축을 위한 인기 있는 자바스크립트 라이브러리인 React는 오류 경계(Error Boundaries)라는 오류를 우아하게 처리하는 강력한 메커니즘을 제공합니다. 이 종합 가이드에서는 오류 경계의 개념을 깊이 파고들어, 복원력 있는 React 애플리케이션 구축을 위한 목적, 구현 및 모범 사례를 탐구합니다.

오류 경계의 필요성 이해하기

React 컴포넌트는 다른 코드와 마찬가지로 오류에 취약합니다. 이러한 오류는 다음과 같은 다양한 원인에서 발생할 수 있습니다:

• 예상치 못한 데이터: 컴포넌트가 예상치 못한 형식의 데이터를 받아 렌더링 문제를 일으킬 수 있습니다.
• 로직 오류: 컴포넌트 로직의 버그가 예기치 않은 동작과 오류를 유발할 수 있습니다.
• 외부 종속성: 외부 라이브러리나 API의 문제가 컴포넌트로 오류를 전파할 수 있습니다.

적절한 오류 처리 없이는 React 컴포넌트의 오류가 전체 애플리케이션을 중단시켜 좋지 않은 사용자 경험을 초래할 수 있습니다. 오류 경계는 이러한 오류를 포착하고 컴포넌트 트리 위로 전파되는 것을 방지하여, 개별 컴포넌트가 실패하더라도 애플리케이션이 계속 작동하도록 보장하는 방법을 제공합니다.

React 오류 경계란 무엇인가?

오류 경계는 자식 컴포넌트 트리 어디에서든 자바스크립트 오류를 포착하고, 해당 오류를 기록하며, 충돌한 컴포넌트 트리 대신 대체 UI를 표시하는 React 컴포넌트입니다. 이는 안전망 역할을 하여 오류가 전체 애플리케이션을 중단시키는 것을 방지합니다.

오류 경계의 주요 특징:

• 클래스 컴포넌트 전용: 오류 경계는 반드시 클래스 컴포넌트로 구현해야 합니다. 함수형 컴포넌트와 훅은 오류 경계를 만드는 데 사용할 수 없습니다.
• 생명주기 메서드: 오류를 처리하기 위해 static getDerivedStateFromError()와 componentDidCatch()라는 특정 생명주기 메서드를 사용합니다.
• 지역적 오류 처리: 오류 경계는 자신 내부가 아닌 자식 컴포넌트의 오류만 포착합니다.

오류 경계 구현하기

기본적인 오류 경계 컴포넌트를 만드는 과정을 살펴보겠습니다:

1. 오류 경계 컴포넌트 만들기

먼저, ErrorBoundary와 같이 새로운 클래스 컴포넌트를 생성합니다:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 상태를 업데이트합니다.
    return {
      hasError: true
    };
  }

  componentDidCatch(error, errorInfo) {
    // 오류 보고 서비스에 오류를 기록할 수도 있습니다.
    console.error("Caught error: ", error, errorInfo);
    // 예시: logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 사용자 정의 대체 UI를 렌더링할 수 있습니다.
      return (
        <div>
          <h2>문제가 발생했습니다.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

설명:

• Constructor: 컴포넌트의 상태를 hasError: false로 초기화합니다.
• static getDerivedStateFromError(error): 이 생명주기 메서드는 하위 컴포넌트에서 오류가 발생한 후에 호출됩니다. 오류를 인수로 받아 컴포넌트의 상태를 업데이트할 수 있게 해줍니다. 여기서는 hasError를 true로 설정하여 대체 UI를 표시하도록 합니다. 이 메서드는 static 메서드이므로 함수 내에서 this를 사용할 수 없습니다.
• componentDidCatch(error, errorInfo): 이 생명주기 메서드는 하위 컴포넌트에서 오류가 발생한 후에 호출됩니다. 두 가지 인수를 받습니다:
  • error: 발생한 오류입니다.
  • errorInfo: 오류가 발생한 컴포넌트 스택에 대한 정보가 포함된 객체입니다. 디버깅에 매우 유용합니다.

  이 메서드 내에서 Sentry, Rollbar 또는 사용자 정의 로깅 솔루션과 같은 서비스에 오류를 기록할 수 있습니다. 이 함수 내에서 직접 오류를 다시 렌더링하거나 수정하려고 하지 마세요. 주요 목적은 문제를 기록하는 것입니다.

• render(): render 메서드는 hasError 상태를 확인합니다. true이면 대체 UI(이 경우 간단한 오류 메시지)를 렌더링합니다. 그렇지 않으면 컴포넌트의 자식들을 렌더링합니다.

2. 오류 경계 사용하기

오류 경계를 사용하려면 오류를 발생시킬 수 있는 모든 컴포넌트를 ErrorBoundary 컴포넌트로 감싸기만 하면 됩니다:

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  // 이 컴포넌트는 오류를 발생시킬 수 있습니다.
  return (
    <ErrorBoundary>
      <PotentiallyBreakingComponent />
    </ErrorBoundary>
  );
}

export default MyComponent;

만약 PotentiallyBreakingComponent가 오류를 발생시키면, ErrorBoundary가 이를 포착하고 오류를 기록한 후 대체 UI를 렌더링합니다.

3. 전역 컨텍스트를 사용한 예시

원격 서버에서 가져온 상품 정보를 표시하는 전자상거래 애플리케이션을 생각해보세요. ProductDisplay라는 컴포넌트가 상품 상세 정보를 렌더링하는 역할을 합니다. 하지만 서버가 때때로 예상치 못한 데이터를 반환하여 렌더링 오류를 일으킬 수 있습니다.

// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product }) {
  // product.price가 숫자가 아닐 경우 발생할 수 있는 오류를 시뮬레이션합니다.
  if (typeof product.price !== 'number') {
    throw new Error('Invalid product price');
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
      <img src={product.imageUrl} alt={product.name} />
    </div>
  );
}

export default ProductDisplay;

이러한 오류로부터 보호하기 위해 ProductDisplay 컴포넌트를 ErrorBoundary로 감싸줍니다:

// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ProductDisplay from './ProductDisplay';

function App() {
  const product = {
    name: 'Example Product',
    price: 'Not a Number', // 의도적으로 잘못된 데이터
    imageUrl: 'https://example.com/image.jpg'
  };

  return (
    <div>
      <ErrorBoundary>
        <ProductDisplay product={product} />
      </ErrorBoundary>
    </div>
  );
}

export default App;

이 시나리오에서는 product.price가 의도적으로 숫자가 아닌 문자열로 설정되었기 때문에 ProductDisplay 컴포넌트에서 오류가 발생합니다. ErrorBoundary는 이 오류를 포착하여 전체 애플리케이션의 중단을 막고, 깨진 ProductDisplay 컴포넌트 대신 대체 UI를 표시합니다.

4. 국제화된 애플리케이션에서의 오류 경계

글로벌 사용자를 위한 애플리케이션을 구축할 때, 더 나은 사용자 경험을 제공하기 위해 오류 메시지는 현지화되어야 합니다. 오류 경계는 국제화(i18n) 라이브러리와 함께 사용하여 번역된 오류 메시지를 표시할 수 있습니다.

// ErrorBoundary.js (i18n 지원 포함)
import React from 'react';
import { useTranslation } from 'react-i18next'; // react-i18next를 사용한다고 가정

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      return (
        <FallbackUI error={this.state.error} errorInfo={this.state.errorInfo}/>
      );
    }

    return this.props.children;
  }
}

const FallbackUI = ({error, errorInfo}) => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('error.title')}</h2>
      <p>{t('error.message')}</p>
      <details style={{ whiteSpace: 'pre-wrap' }}>
        {error && error.toString()}<br />
        {errorInfo?.componentStack}
      </details>
    </div>
  );
}


export default ErrorBoundary;

이 예제에서는 react-i18next를 사용하여 대체 UI의 오류 제목과 메시지를 번역합니다. t('error.title') 및 t('error.message') 함수는 사용자가 선택한 언어에 따라 적절한 번역을 가져옵니다.

5. 서버 사이드 렌더링(SSR) 고려사항

서버 사이드 렌더링 애플리케이션에서 오류 경계를 사용할 때, 서버가 충돌하는 것을 방지하기 위해 오류를 적절하게 처리하는 것이 중요합니다. React 문서에서는 서버에서의 렌더링 오류 복구를 위해 오류 경계를 사용하지 말 것을 권장합니다. 대신, 컴포넌트를 렌더링하기 전에 오류를 처리하거나 서버에서 정적 오류 페이지를 렌더링하세요.

오류 경계 사용을 위한 모범 사례

• 세분화된 컴포넌트 감싸기: 개별 컴포넌트나 애플리케이션의 작은 부분을 오류 경계로 감싸세요. 이는 단일 오류가 전체 UI를 중단시키는 것을 방지합니다. 전체 애플리케이션보다는 특정 기능이나 모듈을 감싸는 것을 고려하세요.
• 오류 기록하기: componentDidCatch() 메서드를 사용하여 모니터링 서비스에 오류를 기록하세요. 이는 애플리케이션의 문제를 추적하고 수정하는 데 도움이 됩니다. Sentry, Rollbar, Bugsnag와 같은 서비스는 오류 추적 및 보고에 널리 사용되는 선택지입니다.
• 정보성 있는 대체 UI 제공하기: 대체 UI에 사용자 친화적인 오류 메시지를 표시하세요. 기술적인 전문 용어를 피하고, 페이지 새로고침이나 고객 지원 문의와 같이 사용자가 취할 수 있는 다음 단계를 안내하세요. 가능하다면 사용자가 취할 수 있는 대안적인 행동을 제안하세요.
• 과도하게 사용하지 않기: 모든 단일 컴포넌트를 오류 경계로 감싸는 것을 피하세요. 외부 API에서 데이터를 가져오거나 복잡한 사용자 상호작용을 처리하는 컴포넌트와 같이 오류가 발생할 가능성이 더 높은 영역에 집중하세요.
• 오류 경계 테스트하기: 오류 경계로 감싼 컴포넌트에서 의도적으로 오류를 발생시켜 오류 경계가 올바르게 작동하는지 확인하세요. 단위 테스트나 통합 테스트를 작성하여 대체 UI가 예상대로 표시되고 오류가 올바르게 기록되는지 확인하세요.
• 오류 경계는 다음 용도가 아닙니다:
  • 이벤트 핸들러
  • 비동기 코드 (예: setTimeout 또는 requestAnimationFrame 콜백)
  • 서버 사이드 렌더링
  • 오류 경계 자체(자식이 아닌)에서 발생한 오류

고급 오류 처리 전략

1. 재시도 메커니즘

경우에 따라, 오류를 유발한 작업을 재시도하여 오류로부터 복구할 수 있습니다. 예를 들어, 네트워크 요청이 실패하면 짧은 지연 후 재시도할 수 있습니다. 오류 경계는 재시도 메커니즘과 결합하여 더 복원력 있는 사용자 경험을 제공할 수 있습니다.

// ErrorBoundaryWithRetry.js
import React from 'react';

class ErrorBoundaryWithRetry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      retryCount: prevState.retryCount + 1,
    }), () => {
      // 이는 컴포넌트를 강제로 다시 렌더링합니다. 제어되는 props를 사용하는 더 나은 패턴을 고려하세요.
      this.forceUpdate(); // 경고: 주의해서 사용하세요
      if (this.props.onRetry) {
          this.props.onRetry();
      }
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>문제가 발생했습니다.</h2>
          <button onClick={this.handleRetry}>재시도</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundaryWithRetry;

ErrorBoundaryWithRetry 컴포넌트는 클릭 시 hasError 상태를 재설정하고 자식 컴포넌트를 다시 렌더링하는 재시도 버튼을 포함합니다. 재시도 횟수를 제한하기 위해 retryCount를 추가할 수도 있습니다. 이 접근 방식은 일시적인 네트워크 중단과 같은 일시적인 오류를 처리하는 데 특히 유용할 수 있습니다. `onRetry` prop이 적절하게 처리되어 오류가 발생했을 수 있는 로직을 다시 가져오거나 재실행하도록 해야 합니다.

2. 기능 플래그

기능 플래그를 사용하면 새 코드를 배포하지 않고도 애플리케이션의 기능을 동적으로 활성화하거나 비활성화할 수 있습니다. 오류 경계는 기능 플래그와 함께 사용하여 오류 발생 시 기능을 점진적으로 저하시킬 수 있습니다. 예를 들어, 특정 기능이 오류를 일으키는 경우 기능 플래그를 사용하여 해당 기능을 비활성화하고 사용자에게 해당 기능이 일시적으로 사용할 수 없음을 알리는 메시지를 표시할 수 있습니다.

3. 서킷 브레이커 패턴

서킷 브레이커 패턴은 애플리케이션이 실패할 가능성이 높은 작업을 반복적으로 실행하는 것을 방지하기 위해 사용되는 소프트웨어 디자인 패턴입니다. 이는 작업의 성공 및 실패율을 모니터링하고, 실패율이 특정 임계값을 초과하면 '회로를 열어' 일정 기간 동안 해당 작업의 추가 실행을 방지하는 방식으로 작동합니다. 이는 연쇄적인 실패를 방지하고 애플리케이션의 전반적인 안정성을 향상시키는 데 도움이 될 수 있습니다.

오류 경계는 React 애플리케이션에서 서킷 브레이커 패턴을 구현하는 데 사용될 수 있습니다. 오류 경계가 오류를 포착하면 실패 카운터를 증가시킬 수 있습니다. 실패 카운터가 임계값을 초과하면 오류 경계는 사용자에게 해당 기능을 일시적으로 사용할 수 없음을 알리는 메시지를 표시하고 해당 작업의 추가 실행을 방지할 수 있습니다. 일정 시간이 지나면 오류 경계는 '회로를 닫고' 작업 실행을 다시 허용할 수 있습니다.

결론

React 오류 경계는 견고하고 사용자 친화적인 애플리케이션을 구축하는 데 필수적인 도구입니다. 오류 경계를 구현함으로써 오류가 전체 애플리케이션을 중단시키는 것을 방지하고, 사용자에게 우아한 대체 UI를 제공하며, 디버깅 및 분석을 위해 모니터링 서비스에 오류를 기록할 수 있습니다. 이 가이드에서 설명한 모범 사례와 고급 전략을 따르면, 예상치 못한 오류에 직면하더라도 복원력 있고 신뢰할 수 있으며 긍정적인 사용자 경험을 제공하는 React 애플리케이션을 구축할 수 있습니다. 글로벌 사용자를 위해 현지화된 유용한 오류 메시지를 제공하는 데 집중하는 것을 기억하세요.